$(function () {

  
  
//下拉列表
$('.select-grid').select2({
  placeholder: '请选择',
  theme: 'classic',
  language: "zh-CN",
});
});


var vm = new Vue({
el:'#rrapp',
data:{
  showList: true,
  title: null,
  //图表
  Chart: {
    myChart: null,
    type: 'bar',  
  },
  selectCondition: {
    //x轴
    xAxiss: [
      {
        id: 1,
        name:'年',
      },
      {
        id: 2,
        name:'月',
      }
    ],
    //y轴
    yAxiss: [
      {
        id: '1',
        name: '投递人数',
      }
    ],
      citys:[
          {
              id: '1',
              name: '中山',
          }, {
              id: '2',
              name: '重庆',
          }, {
              id: '3',
              name: '广州',
          }, {
              id: '4',
              name: '北京',
          }, {
              id: '5',
              name: '珠海',
          }, {
              id: '6',
              name: '深圳',
          },
      ]
  },
},
mounted (){
},
mounted (){
  this.Chart.myChart = echarts.init(document.getElementById('myCharts'));

  const options = {
    title: {
      id: 'myCanvas',
      text: 'MyCharts'
    },
    tooltip: {},
    dataset: {
      dimensions: ['category', '投递人数'],
      source: [
        ['中山', 5],
        ['重庆', 10],
        ['广州', 15],
        ['深圳', 20],
        ['北京', 25],
        ['珠海', 15],
      ]
    },
    legend: {},
    xAxis: { type: 'category' },
    yAxis: {},
    series: [
      { type: 'bar'},
    ]
  }

  
  this.Chart.myChart.setOption(options);


  //饼图
  const myChart2 = echarts.init(document.getElementById('myCharts2'));
  const options2 = {
    title: {
      id: 'myCanvas2',
      text: '投递总数',
      subtext: '每个城市投递人数',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br />{b} : {c}人 ({d}%)",
    },
    legend: {
      orient: 'vertical',
      right: 100,
      top: '30%',
      bottom: 20,
    },
    series: [
      {
        name: '城市',
        type: 'pie',
        radius: '70%',
        center:  ['50%', '60%'],
        data: [
          {value: 10, name: '中山1'},
          {value: 20, name: '珠海2'},
          {value: 30, name: '重庆3'},
          {value: 40, name: '广州4'},
          {value: 50, name: '北京5'},
          {value: 60, name: '深圳6'},
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, .5)'
          }
        }

      }
    ]
  };
  myChart2.setOption(options2);
},
methods: {
  switchCharts: function (){
    let options = vm.Chart.myChart.getOption();

    if(vm.Chart.type == 'bar'){
      vm.Chart.type = 'line';
    }else {
      vm.Chart.type = 'bar';
    }
    
    for(let i = 0; i < options.series.length; i++){
      options.series[i].type = vm.Chart.type;
    }
    console.log(options);
    vm.Chart.myChart.setOption(options);
  },
  //查询
  select: function (e){
   alert("查询方法未完善");
  },

  //导出
  exportCharts: function (e){
    const url = vm.Chart.myChart.getDataURL();
    // 生成一个a元素
    var a = document.createElement('a');
    // 创建一个单击事件
    var event = new MouseEvent('click');
    
    // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
    a.download = name || 'MyCharts';
    // 将生成的URL设置为a.href属性
    a.href = url;
    
    // 触发a的单击事件
    a.dispatchEvent(event);
  },
}
});